const path = require('path');
const webpack = require('webpack');    //(2)热加载操作
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: path.join(__dirname, 'src/main.js'),  //配置入口文件

    // 配置出口文件
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },

    // webpack-dev-server的参数的第二种配置方式
    devServer: {
        open: true,
        port: 54188,
        contentBase: 'src',
        hot: true    //(1)热加载操作
    },

    // 各种插件
    plugins: [
        new webpack.HotModuleReplacementPlugin(),   //(3)热加载操作
        // 将html文件载入到内存中，同时会将webpack打包编译好的bundle.js文件自动加载进index.html文件中
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src/index.html'),
            filename: 'index.html'
        }),
    ],

    // 各种loader(加载器)
    module:{
        rules:[
            {test: /\.css$/, use:['style-loader', 'css-loader']},
            {test: /\.less$/, use:['style-loader', 'css-loader', 'less-loader']},
            {test: /\.scss$/, use:['style-loader', 'css-loader', 'sass-loader']},
            {test: /\.(png|svg|jpg|gif)$/, use: 'url-loader?limit=2048&name=[hash:8]-[name].[ext]'},
            {test:/\.(woff|woff2|eot|ttf|otf)$/, use:'file-loader'},
            {test:/\.js$/, use:'babel-loader', exclude:/node_modules/},
            {test: /\.vue$/, use:'vue-loader'}
        ]
    },

    resolve: {
        alias: {// 起别名
            // "vue$": "vue/dist/vue.js"  //以vue结尾的文件，导入的地址为vue/dist/vue.js
        }
    }
}